<!-- <template>
  <div>
    <el-card style="height: 800px;">
      <h1>数据管理</h1>
      <el-divider></el-divider>
      <p style="font-size: 35px;">数据备份</p>
      <br><br>
      <el-button style="background-color: #394E9E;color:white">全库数据备份</el-button><br><br>
      <el-button style="background-color: #394E9E;color:white">小区数据备份</el-button><br><br>
      <el-button style="background-color: #394E9E;color:white">人员信息备份</el-button><br><br>
      <el-button style="background-color: #394E9E;color:white">房屋数据备份</el-button><br><br>
      <el-button style="background-color: #394E9E;color:white">车辆数据备份</el-button><br><br>
      <el-button style="background-color: #394E9E;color:white">管理员数据备份</el-button><br><br>
    </el-card>
  </div>
</template> -->

<template>
  <div class="content">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight:700;font-size:24px">数据备份</span>
            <el-button style="float: right;" icon="el-icon-download" type="success" @click="Export"
              v-show="false">导出</el-button>
          </div>
          <!-- <el-button style="background-color: #394E9E;color:white">全库数据备份</el-button><br><br> -->
          <el-button style="background-color: #394E9E;color:white" @click="Export1">小区数据备份</el-button><br><br>
          <!-- <el-button style="background-color: #394E9E;color:white" @click="Export2">人员信息备份</el-button><br><br>
          <el-button style="background-color: #394E9E;color:white" @click="Export3">房屋数据备份</el-button><br><br>
          <el-button style="background-color: #394E9E;color:white" @click="Export4">车辆数据备份</el-button><br><br> -->
          <!-- <el-button style="background-color: #394E9E;color:white">管理员数据备份</el-button><br><br> -->

          <el-table id="table_excel" border :data="tableData" style="width: 100%" height="580" v-show="false">
            <el-table-column align="center" prop="date" label="日期" width="200">
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column align="center" prop="province" label="省份" width="120">
            </el-table-column>
            <el-table-column align="center" prop="city" label="市区" width="120">
            </el-table-column>
            <el-table-column align="center" prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column align="center" prop="zip" label="邮编">
            </el-table-column>
          </el-table>
          <el-select v-model="value4" placeholder="请选择" class="generate" size="small" @change="onOptionChange">
            <el-option v-for="item in options4" :key="item.value4" :label="item.label" :value="item.value4"></el-option>
          </el-select>
          <!-- 小区 -->
          <el-table id="table_excel1" ref="multipleTable" :data="list1" tooltip-effect="dark" style="width: 100%"
            v-show="false">
            <el-table-column prop="_id" label="_id" width="55">
            </el-table-column>
            <el-table-column prop="name" label="name">
            </el-table-column>
            <el-table-column prop="address" label="address">
            </el-table-column>
            <el-table-column prop="kfs" label="ksf">
            </el-table-column>
            <el-table-column prop="wuye" label="wuye">
            </el-table-column>
            <el-table-column prop="time" label="time">
              <template scope="scope">
                {{ scope.row.time | shijian }}
              </template>
            </el-table-column>
          </el-table>



          <!-- 房屋 -->
          <el-table id="table_excel2" ref="multipleTable" :data="list2" tooltip-effect="dark" style="width: 100%"
            v-show="false">
            <el-table-column prop="_id" label="id" width="55">
            </el-table-column>
            <el-table-column prop="doorid" label="门牌号">
            </el-table-column>
            <el-table-column label="房屋面积">
              <template scope="scope">
                <span>{{ scope.row.mianji | mianji }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="huzhu" label="户主">
            </el-table-column>
            <el-table-column prop="xiaoqu" label="所属小区">
            </el-table-column>
            <el-table-column prop="time" label="建档日期">
              <template scope="scope">
                {{ scope.row.time | shijian }}
              </template>
            </el-table-column>
          </el-table>




          <!-- 人员 -->
          <el-table id="table_excel3" ref="multipleTable" :data="list3" tooltip-effect="dark" style="width: 100%"
            v-show="false">
            <el-table-column prop="_id" label="id" width="55">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式">
            </el-table-column>
            <el-table-column prop="xiaoqu" label="住址">
            </el-table-column>
            <el-table-column prop="time" label="建档日期">
              <template scope="scope">
                {{ scope.row.time | shijian }}
              </template>
            </el-table-column>
          </el-table>



          <!--车辆 -->
          <el-table id="table_exce4" ref="multipleTable" :data="list4" tooltip-effect="dark" style="width: 100%"
            v-show="false">
            <el-table-column prop="_id" label="id" width="55">
            </el-table-column>
            <el-table-column prop="carid" label="车牌号">
            </el-table-column>
            <el-table-column prop="ren" label="车主">
            </el-table-column>
            <el-table-column prop="color" label="车身颜色">
            </el-table-column>
            <el-table-column prop="xiaoqu" label="所属小区">
            </el-table-column>
            <el-table-column prop="time" label="建档日期">
              <template scope="scope">
                {{ scope.row.time | shijian }}
              </template>
            </el-table-column>
          </el-table>

          

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  filters: {
    mianji: function (value) {
      return value + 'm²'
    }
  },
  data() {
    return {
      value4: '',
      options4: [
        {
          value4: '1',
          label: '导出'
        },
        {
          value4: '2',
          label: 'PDF'
        },
        {
          value4: '3',
          label: 'WOED'
        },
        {
          value4: '4',
          label: 'EXCEL'
        },
        {
          value4: '4',
          label: 'Json'
        }
      ],



      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      tableData111: [
        ['Name', 'Age', 'Gender'],
        ['Alice', 25, 'Female'],
        ['Bob', 30, 'Male']
      ],
      title: "导出演示",
      title1: "小区数据",
      title2: "人员信息",
      title3: "房屋数据",
      title4: "车辆数据",
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    onOptionChange() {
      this.generateFile(this.value4)
      console.log('我是改变事件');
    },
    downloadTestFile(fileName,content){
      const element = document.createElement('a');
      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
      element.setAttribute('download', fileName);
      element.style.display = 'none';
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    },
    generateFile(option){
      console.log(option,'option');
      if(!this.value4) return

      const fileName = "example" + this.value4.toLocaleLowerCase()
      
    },

    Export() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    },
    Export1() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel1');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title1}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    },
    Export2() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel2');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title2}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    },
    Export3() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel3');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title3}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    },
    Export4() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        //这里是加一个导出提示，根据个人喜好，可加可不加   
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        setTimeout(() => {
          var xlsxParam = { raw: true }  // 导出的内容只做解析，不进行格式转换
          let tables = document.getElementById('table_excel4');   //这里是绑定元素，输入你要导出的table表格的id
          let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
          const table_write = this.$XLSX.write(table_book, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            this.$FileSaver.saveAs(
              new Blob([table_write], { type: "application/octet-stream" }), `${this.title4}.xlsx`   //这里是文件名
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, table_write);
          }
          return table_write;
        }, 1000)
      })
    },
    async getwuzi() {
      let { data } = await this.axios.get('/wuzilist')
      this.list2 = data.wuzilist
    },
    async getcar() {
      let { data } = await this.axios.get('/carlist')
      this.list4 = data.carlist
    },
    async getren() {
      let { data } = await this.axios.get('/renlist')
      this.list3 = data.renlist
    },
    async getxiaoqu() {
      let { data } = await this.axios.get('/xiaoqulist')
      this.list1 = data.list
    },
  },
  mounted() {
    this.getwuzi()
    this.getcar()
    this.getren()
    this.getxiaoqu()
  },
}
</script>

<style></style>